<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>refresh</title>
    <style>
        #form{
            width: 600px;
            height: 600px;
            margin: 0 auto;
            /* text-align: center; */
            background:rgba(154,205,50, 0.8);
            border: 5px solid rgba(217, 231, 187, 0.6);
            border-radius: 10px;
        }
        #form p{
            width: 450px;
            height: 45px;
            /* text-align: center; */
            line-height: 45px;
            margin: 20px auto;
            background: rgba(216, 241, 164, 0.6);
            border: 5px solid rgba(217, 231, 187, 0.6);
            border-radius: 10px;
            color: #666;
            font-size: 17px;
        }
        #btn{
            width: 100px;
            height: 30px;
            background: rgba(154,205,50, 0.8);
            margin:0 auto;    
        }
        .inp{
            height: 30px;
            width: 250px;
            background-color: rgba(217, 231, 187, 0.8);
            color: #aaa;
            border:2px solid lightslategray;
            border-radius: 6px; 
            margin-left:30px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <form id="form" action="">
        <p>
            用户昵称:
            <input class="inp" type="text" name="username">
        </p>
        <p>
            实际年龄:
            <input class="inp" type="text" name="age">
        </p>
        <p>
            邮件地址:
            <input class="inp" type="text" name="email">
        </p>
        <p>
            联系电话:
            <input class="inp" type="text" name="phone">
        </p>
        <p>
            用户性别：
            <input name="sex" type="radio" value="boy">boy
            <input name="sex" type="radio" value="gril">gril
        </p>
        <p>
            兴趣爱好：
            <input name="hooby" type="checkbox" value="css" >css
            <input name="hooby" type="checkbox" value="html" >html
            <input name="hooby" type="checkbox" value="js" >js
            <input name="hooby" type="checkbox" value="jquery" >jquery
            <input name="hooby" type="checkbox" value="node" >node
        </p>
        <p id="btnp">
            <input id="btn" onclick="refresh()" type="button" value="保存">
        </p>
    </form>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    var username=$('[name=username]');
    var age=$('[name=age]');
    var email=$('[name=email]');
    var phone=$('[name=phone]');
    function refresh(){
        var data={
            username:username.val(),
            age:age.val(),
            email:email.val(),
            phone:phone.val(),
            sex:$('[name=sex]:checked').val(),
        }
        console.log(data);
        $.post('/abc',{
            getobj:JSON.stringify(data)
        }).done(function(res){
            console.log(res)
        })
    }
    $.get('/abc',{id:'stu'}).done(function(res){
        username.val(res.username)
        age.val(res.age)
        email.val(res.email);
        phone.val(res.phone);
        $('[value='+res.sex+']').prop('checked',true);
        $.map(res.hobby,function(value){
            $('[value='+value+']').prop('checked',true);
        })
    })
</script>
</html>